<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/login.css">
    <title>login</title>
</head>

<body>
    <div class="loginContainer">
        <!-- 头部 -->
        <div class="lgTop">
            <div class="lgHeader">
                <div class="headerLeft">
                    <a href="###">
                        <img src="../images/logomain2.png" alt="">
                    </a>
                    <div class="input-all">
                        <span class="inputSpan">
                            <input class="leftInput" type="text" placeholder="书籍 电影 音乐 小组">
                        </span>
                        <span class="searchSpan">
                            <button></button>
                        </span>
                    </div>
                </div>
                <ul class="headerRight">
                    <li class="rightList">
                        读书
                    </li>
                    <li class="rightList">
                        电影
                    </li>
                    <li class="rightList">
                        音乐
                    </li>
                    <li class="rightList">
                        同城
                    </li>
                    <li class="rightList">
                        小组
                    </li>
                    <li class="rightList">
                        阅读
                    </li>
                    <li class="rightList">
                        FM
                    </li>
                    <li class="rightList">
                        时间
                    </li>
                    <li class="rightList">
                        豆品
                    </li>
                </ul>
            </div>
        </div>

        <!-- 登录 -->
        <div class="loginWrapper">
            <div class="wrapper-content">
                <div class="wrapperPic">
                    <!-- <img src="../images/1banner.jpg" alt=""> -->
                </div>
                <div class="wrapperLogin">
                    <!-- 右侧登录 -->
                    <div class="login">
                        <div class="loginContainer">
                            <div class="tabR">
                                <a href="###">
                                    <img src="../images/login.png" alt="">
                                </a>
                            </div>
                            <div class="tabBar">
                                <ul class="tabStart">
                                    <li class="tabMes tabpas">
                                        短信登录／注册
                                    </li>
                                    <li class="tabMes">
                                        密码登录
                                    </li>
                                </ul>
                            </div>
                            <div class="acount-from">
                                <div class="acount-from-tips">
                                    请仔细阅读
                                    <a href="###">豆瓣使用协议，隐私</a>
                                    <!-- <a href="###">找回密码</a> -->
                                </div>
                                <form action="##">
                                    <div class="input-text inputOn clearFix">
                                        <span></span>
                                        <input type="text" placeholder="邮箱/用户名/手机号" v-model="mobile" />
                                    </div>
                                    <div class="input-text inputOn clearFix">
                                        <span class="pwd"></span>
                                        <input type="text" placeholder="验证码" v-model="password" />
                                        <div class="getTest">
                                            <a href="###">获取验证码</a>
                                        </div>
                                    </div>
                                    <button class="btn">登录豆瓣</button>
                                </form type="button">
                                <div class="acount-from-lf">
                                    <p class="acount-from-link">
                                        收不到验证码
                                    </p>
                                </div>
                            </div>
                            <!-- <div class="acount-from">
                                <div class="acount-from-tips">
                                    <a href="###" class="tipsPas">找回密码</a>
                                </div>
                                <form action="##">
                                    <div class="input-text inputOn clearFix">
                                      <span></span>
                                      <input type="text" placeholder="邮箱/用户名/手机号" v-model="mobile" />
                                    </div>
                                    <div class="input-text inputOn clearFix">
                                      <span class="pwd"></span>
                                      <input type="text" placeholder="请输入密码" v-model="password" />
                                    </div>
                                    
                                    <button class="btn">登录豆瓣</button>
                                </form type="button"> 
                                <div class="acount-from-lf">
                                    <p class="acount-from-link">
                                        海外手机登录
                                    </p>
                                </div>
                            </div> -->
                            <div class="acount-footer">
                                <p>第三方登录</p>
                                <div class="acount-img">
                                    <!-- <img src="../images/wchat.svg" alt="">
                                    <img src="../images/weibo.svg" alt=""> -->
                                    <a href="###" class="acoutn-img-fr"></a>
                                    <a href="###" class="acoutn-img-sc"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 左侧下载 -->
                    <div class="app">
                        <p class="app-title">豆瓣<span>6.0</span></p>
                        <a href="javascript:;" class="lnk-app">下载豆瓣App</a>
                        <div class="app-qr">
                            <a href="javascript:;" class="lnk-qr" id="expand-qr">
                                <img src="https://img3.doubanio.com/f/sns/0c708de69ce692883c1310053c5748c538938cb0/pics/sns/anony_home/icon_qrcode_green.png"
                                    width="28" height="28" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 热点内容 -->
        <div class="loginHot">
            <div class="main">
                <div class="mod">
                    <h2>
                        热点内容······
                        <span class="pl">&nbsp;(<a href="###">更多</a>) </span>
                    </h2>
                    <!-- 右侧列表 -->
                    <div class="albums">
                        <ul>
                            <li>
                                <div class="pic">
                                    <a href="###">
                                        <img src="../images/1.webp" alt="" />
                                    </a>
                                </div>
                                <a href="###">
                                    <span>为女儿下厨做饭</span>
                                </a>
                                <span class="num">48张照片</span>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="###">
                                        <img src="../images/1.webp" alt="" />
                                    </a>
                                </div>
                                <a href="###"><span>为女儿下厨做饭</span></a>
                                <span class="num">48张照片</span>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="###">
                                        <img src="../images/1.webp" alt="" />
                                    </a>
                                </div>
                                <a href="###"><span>为女儿下厨做饭</span></a>
                                <span class="num">48张照片</span>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="###">
                                        <img src="../images/1.webp" alt="" />
                                    </a>
                                </div>
                                <a href="###"><span>为女儿下厨做饭</span></a>
                                <span class="num">48张照片</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 中间列表 -->
                    <div class="notes">
                        <ul>
                            <li class="first">
                                <div class="title">
                                    <a href="###">一个普通影迷青年的北漂考研日记</a>
                                </div>
                                <div class="author">
                                    旅地球的灵长类的日记
                                </div>
                                <p>大三北漂、住地下室、毕联炸组、一战失败、毕业离别、399上岸、北电生活、全流程复...</p>
                            </li>
                            <li><a href="###">普通人观察日记 — 今生有缘成夫妻</a></li>
                            <li><a href="###">青藏铁路 | Z165：沿着铁道，一路向西</a></li>
                            <li><a href="###">花11块钱种了盆豆苗，那想到收获了价值百万的欢乐</a></li>
                            <li><a href="###">唐琴过眼瘾录</a></li>
                            <li><a href="###">那匹马、那棵树和地瓜</a></li>
                            <li><a href="###">影视行业为什么拒绝新人？——真实的行业壁垒</a></li>
                            <li><a href="###">苏维埃社会主义共和国联盟在不足5平方厘米的世界中继续存在</a></li>
                            <li><a href="###">敢不敢，再回头看</a></li>
                            <li><a href="###">全职写作两年，和大家公开一下我的收入，聊聊我的焦虑</a></li>
                        </ul>
                    </div>
                    <!-- 右侧列表 -->
                    <div class="modCon">
                        <a href="###">
                            <img src="../images/right.jpg" alt="">
                        </a>
                        <h2>
                            热门话题
                            &nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;
                            <span class="pl">&nbsp;(<a href="###">去话题广场</a>) </span>
                        </h2>
                        <ul>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <!-- 频道列表 -->
        <div class="loginConent">
            <div class="channel">
                <div class="channel-content clearFix">
                    <!-- 导航列表 -->
                    <div class="channel-nav">
                        <h2>
                            <a href="###">豆瓣时间</a>
                        </h2>
                        <ul>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                        </ul>
                    </div>
                    <!-- 右侧列表 -->
                    <div class="channel-right">
                        <h2>热门专栏
                            <span class="pl">&nbsp;(<a href="###">更多</a>) </span>
                        </h2>
                        <ul>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 左侧列表 -->
                    <div class="channel-left">
                        <h2>热门话题
                            <span class="pl">&nbsp;(<a href="###">更多</a>) </span>
                        </h2>
                        <ul>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>